<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>积分商城 - 垃圾分类系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .points-display {
            background: rgba(255,255,255,0.2);
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
            display: inline-block;
        }

        .points-display h2 {
            font-size: 1.8em;
            margin-bottom: 5px;
        }

        .content {
            padding: 30px;
        }

        .back-btn {
            display: inline-block;
            background: #6c757d;
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 5px;
            margin-bottom: 30px;
            transition: all 0.3s;
        }

        .back-btn:hover {
            background: #5a6268;
            text-decoration: none;
            color: white;
        }

        .shop-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
        }

        .shop-item {
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .shop-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
            border-color: #FF6B6B;
        }

        .item-image {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            border-radius: 50%;
            background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: white;
        }

        .item-image img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }

        .item-name {
            font-size: 1.3em;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .item-description {
            color: #666;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .item-price {
            font-size: 1.5em;
            font-weight: bold;
            color: #FF6B6B;
            margin-bottom: 20px;
        }

        .redeem-btn {
            background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
        }

        .redeem-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
        }

        .redeem-btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .category-filter {
            margin-bottom: 30px;
            text-align: center;
        }

        .filter-btn {
            background: #f8f9fa;
            border: 2px solid #dee2e6;
            color: #495057;
            padding: 10px 20px;
            margin: 0 5px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .filter-btn.active {
            background: #FF6B6B;
            border-color: #FF6B6B;
            color: white;
        }

        .filter-btn:hover {
            background: #e9ecef;
        }

        .filter-btn.active:hover {
            background: #FF5252;
        }

        .empty-message {
            text-align: center;
            padding: 50px;
            color: #666;
            font-size: 1.2em;
        }

        .success-message {
            background: #d4edda;
            color: #155724;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            border: 1px solid #c3e6cb;
        }

        .error-message {
            background: #f8d7da;
            color: #721c24;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            border: 1px solid #f5c6cb;
        }

        @media (max-width: 768px) {
            .shop-grid {
                grid-template-columns: 1fr;
            }
            
            .filter-btn {
                display: block;
                margin: 5px 0;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>积分商城</h1>
            <p>用你的积分兑换精美奖品</p>
            <div class="points-display">
                <h2>{{ user_points.points }} 积分</h2>
                <p>可用余额</p>
            </div>
        </div>

        <div class="content">
            <a href="{{ url_for('profile') }}" class="back-btn">← 返回个人中心</a>
            
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="{% if category == 'success' %}success-message{% else %}error-message{% endif %}">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}

            <div class="category-filter">
                <button class="filter-btn active" onclick="filterItems('all')">全部</button>
                <button class="filter-btn" onclick="filterItems('tips')">环保贴士</button>
                <button class="filter-btn" onclick="filterItems('virtual')">虚拟奖品</button>
                <button class="filter-btn" onclick="filterItems('badge')">专属徽章</button>
            </div>

            <div class="shop-grid">
                {% for item in shop_items %}
                <div class="shop-item" data-category="{{ item.category }}">
                    <div class="item-image">
                        {% if item.image_url %}
                            <img src="{{ item.image_url }}" alt="{{ item.name }}">
                        {% else %}
                            {% if item.category == 'tips' %}🌱
                            {% elif item.category == 'virtual' %}🎁
                            {% elif item.category == 'badge' %}🏆
                            {% else %}💎
                            {% endif %}
                        {% endif %}
                    </div>
                    <div class="item-name">{{ item.name }}</div>
                    <div class="item-description">{{ item.description }}</div>
                    <div class="item-price">{{ item.points_cost }} 积分</div>
                    <button class="redeem-btn" 
                            onclick="redeemItem({{ item.id }}, {{ item.points_cost }})"
                            {% if user_points.points < item.points_cost %}disabled{% endif %}>
                        {% if user_points.points < item.points_cost %}
                            积分不足
                        {% else %}
                            立即兑换
                        {% endif %}
                    </button>
                </div>
                {% endfor %}
                
                {% if not shop_items %}
                <div class="empty-message">
                    <p>商城暂时没有商品，敬请期待！</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <script>
        function filterItems(category) {
            const items = document.querySelectorAll('.shop-item');
            const buttons = document.querySelectorAll('.filter-btn');
            
            // 更新按钮状态
            buttons.forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');
            
            // 过滤商品
            items.forEach(item => {
                if (category === 'all' || item.dataset.category === category) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        }

        function redeemItem(itemId, cost) {
            if (confirm(`确定要花费 ${cost} 积分兑换这个商品吗？`)) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/points_shop/redeem';
                
                const itemInput = document.createElement('input');
                itemInput.type = 'hidden';
                itemInput.name = 'item_id';
                itemInput.value = itemId;
                
                form.appendChild(itemInput);
                document.body.appendChild(form);
                form.submit();
            }
        }
    </script>
</body>
</html>